<template>
    <div class="addBox">
        <span class="pageName">设置 / 机构管理 / 新增机构</span>
        <div class="addForm">
            <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="机构名称" prop="orgName">
                    <el-input v-model="addForm.orgName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="地址" prop="orgAddress">
                    <el-input v-model="addForm.orgAddress" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="管理员姓名" prop="adminName">
                    <el-input v-model="addForm.adminName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="联系方式" prop="adminPhone">
                    <el-input v-model="addForm.adminPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="账号" prop="adminAccount">
                    <el-input v-model="addForm.adminAccount" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="密码" prop="adminPassword">
                    <el-input v-model="addForm.adminPassword" type="password" placeholder="请输入" />
                </el-form-item>
                <el-form-item class="formBtn">
                    <el-button @click="cancelAdd" :plain="true">取消</el-button>
                    <el-button type="primary" @click="submitForm(addFormRef)" :plain="true">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onBeforeMount } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from '@/util/http'
import Qs from 'qs'
export default defineComponent({
    name: 'AddInstitutional',
    setup() {
        const state = reactive({
            formSize: ref('default'),
            // 表单数据
            addForm: reactive({
                'orgName': '',
                'orgAddress': '',
                'adminName': '',
                'adminPhone': '',
                'adminAccount': '',
                'adminPassword': '',
                'orgCreator':''
            })
        })

        const router = useRouter();

        const addFormRef = ref<FormInstance>()
        const rules = reactive<FormRules>({
            orgName: [
                { required: true, message: '请输入机构名称', trigger: ['change', 'blur'] },
            ],
            adminName: [
                { required: true, message: '请输入管理员姓名', trigger: ['change', 'blur'] },
                { min: 2, max: 15, message: '长度应在2-15个字符', trigger: ['change', 'blur'] },
            ],
            adminPhone: [
                { required: true, message: '请输入联系方式', trigger: ['change', 'blur'] },
                { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的联系方式', trigger: ['change', 'blur'] },
            ],
            adminAccount: [
                { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
                { min: 3, message: '最少3个字符', trigger: ['change', 'blur'] },
                { pattern: /^[a-zA-Z]+$/, message: '账号只能含有英文字母或数字', trigger: ['change', 'blur'] },
            ],
            adminPassword: [
                { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
                { min: 3,  message: '最少3个字符', trigger: ['change', 'blur'] },
            ],
        })

        const cancelAdd = () => {
            console.log('取消');
            router.push('/Institutional')
            ElMessage('已取消新增！')
        }
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {

                    axios({
                        method: 'post',
                        url: 'city_sys_organization/addorganization',
                        data: state.addForm

                    })
                        .then(res => {
                            if (res.data.msg == '添加成功！') {
                                ElMessage({
                                    message: '新增成功！',
                                    type: 'success',
                                })
                                router.push('/Institutional');
                            } else if (res.data.msg == "添加失败，要添加是账号已存在！") {
                                ElMessage.error('该账号已存在，请重新输入！')
                            }
                        })
                } else {
                    console.log('添加失败!', fields)
                }
            })
        }
        onBeforeMount(()=>{
            state.addForm.orgCreator = 'admin'
        })

        return {
            ...toRefs(state),
            addFormRef,
            rules,
            // 按钮
            cancelAdd,
            submitForm,
        }
    }
})
</script>

<style scoped lang="less">
.addBox {
    width: 100%;
    display: flex;
    flex-direction: column;

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 新增表单
    .addForm {
        width: 80%;
        display: flex;
        background: white;
        margin-top: 20px;
        padding: 30px;
        border-radius: 4px;
        font-size: 13px;

        .el-input {
            width: 410px;
            height: 40px;
            font-size: 13px;
        }


        /deep/ .formBtn {
            width: 100%;
            margin-top: 80px;

            .el-form-item__content {
                display: flex;
                justify-content: flex-end;

                // 按钮
                .el-button {
                    width: 95px;
                    height: 40px;
                    font-size: 13px;
                }
            }

        }
    }

}

.el-form-item {
    display: flex;
    align-items: center;
}

/deep/ .el-form-item__label {
    font-size: 13px;
}
</style>